還記得你只有打開 HTML 檔案的時候嗎？
是不是覺得畫面就是一堆黑白文字，頂多加個< h1 >標題看起來比較大一點點。
沒錯，HTML 本身就像是「房子的骨架」，負責結構。
但如果房子只有骨架，沒有油漆、沒有家具，那看起來是不是超單調？

這時候，我們就需要 CSS 啦！
它全名叫 Cascading Style Sheets（層疊樣式表），簡單來說就是「幫網頁增加視覺效果的設計師」！

CSS 到底能幹嘛？

你可以把 CSS 想像成「化妝師 + 室內設計師」：
• 改變字體顏色、大小、間距 → 就像幫字加眼影
• 設定背景顏色或圖片 → 幫房子刷漆
• 排版、對齊、間距 → 幫房子室內裝潢
• 加上動畫、互動效果 → 房子裡還會有可以互動的便利智慧家具

一個只有 HTML 的網頁，就像只有黑白文字的 Word 文件；
但加上 CSS 之後，整個網頁就像是精心整理過的預售屋，有經過修飾跟裝潢，
不再是只有骨架的鋼筋水泥毛胚屋😎

CSS 怎麼用？三種方法

你可能會想：「那 CSS 要放在哪裡啊？」
其實它有三種常見的用法，適合不同情況：

1.行內樣式（Inline CSS）
直接寫在 HTML 標籤裡：

<p style="color: red;">這段字是紅色的</p>

👉 優點：快速！
👉 缺點：太亂，不適合長期維護。

2.內部樣式（Internal CSS）
把 CSS 寫在 裡：

<style>
  p { color: blue; }
</style>
<p>這段字是藍色的</p>

👉 適合小專案，程式碼集中。

3.外部樣式（External CSS） ✅ 最推薦！
把 CSS 另外存成 style.css，然後用 < link > 引入：

<link rel="stylesheet" href="style.css">

👉 專案大一點時必備，乾淨、好維護。

CSS 的基本語法

寫 CSS 的時候，你一定會看到這種格式：

選擇器 {
  屬性: 值;
}

• 選擇器：告訴瀏覽器「要改誰」
• 屬性：要改什麼（字體大小、顏色、間距…）
• 值：改成什麼樣子

範例：

h1 {
  color: orange;       /* 把字改成橘色 */
  font-size: 32px;     /* 設定字體大小 */
  text-align: center;  /* 文字置中 */
}

🎯 常見選擇器

CSS 就像點名一樣，你要告訴它「誰要化妝」：

1.標籤選擇器

p { color: gray; }

👉 把所有 都改成灰色。

2.類別選擇器（class）

.title { font-size: 24px; }

👉 .title 只會套用在 class="title" 的元素上。

3.ID 選擇器

#intro { color: blue; }

👉 #intro 只會套用在 id="intro" 的元素上。

小提醒：
• class 可以重複使用，像衣服樣式。
• id 像身分證號碼，只能唯一。

💡 小練習：打造你的第一個「名片網頁」

HTML：

<h1 class="title">嗨，我是 Sunshine！</h1>
<p id="intro">我正在學 CSS，請多多指教！</p>

CSS：

body {
  background-color: #f9f9f9;
  font-family: Arial, sans-serif;
}

.title {
  color: orange;
  text-align: center;
}

#intro {
  font-size: 18px;
  color: gray;
  text-align: center;
}

打開後你就會看到一個「有設計感的簡單網頁」啦 🎉

📍 Day 1 結尾：今天你學到什麼？

• CSS 就是網頁的造型設計師
• 有三種用法：行內、內部、外部（建議用外部）
• CSS 語法就是「選擇器 + 屬性 + 值」
• 學會基本的 color、font-size、text-align

好啦！恭喜你踏進CSS的世界了
可以把之前寫過的HTML加上 CSS
會發現自己的網站變漂亮😍
感謝你的閱讀，我是Ting，接下來明天一起繼續學習更多 CSS 新技能吧！